<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>万水千山客栈</title>
	<link href="/static/index/business/css/admin.css" rel="stylesheet" type="text/css">
	<link href="/static/index/business/css/amazeui.css" rel="stylesheet" type="text/css">

	<link href="/static/index/business/css/personal.css" rel="stylesheet" type="text/css">
	<link href="/static/index/business/css/infstyle.css" rel="stylesheet" type="text/css">
	<script src="/static/index/business/js/jquery.min.js"></script>
	<script src="/static/index/business/js/amazeui.js"></script>
	{load href="/static/index/css/bootstrap.min.css"}
	{load href="/static/index/css/footer.css"}
	<link href="/static/index/business/css/stepstyle.css" rel="stylesheet" type="text/css">

	<!--轮播图样式css,js开始-->
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" ></script>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		ul {list-style: none;}
		.out {
			position: relative;
			width: 90%;
			height: 500px;
			margin: 50px auto;
		}
		.out .img li {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		.out .num {
			position: absolute;
			bottom: 20px;
			left: 0;
			font-size: 0;
			width: 100%;
			text-align: center;
		}
		.out .num li {
			width: 20px;
			height: 20px;
			display: inline-block;
			font-size: 16px;
			background-color: #666;
			color: #fff;
			text-align: center;
			line-height: 20px;
			border-radius: 50%;
			margin: 0 3px;
			cursor: pointer;
		}
		.out .num li.active { background-color:#a00;}
		.out .btn {
			position: absolute;
			top: 50%;
			width: 40px;
			height: 70px;
			margin-top: -30px;
			background: rgba(0,0,0,.5);
			color: #fff;
			text-align: center;
			line-height: 40px;
			font-size: 40px;
			display: none;
		}
		.out:hover .btn{
			display: block;
			cursor: pointer;
		}
		.out .left { left:0;}
		.out .right { right: 0;}

		/*.backimage {background-image : url('/static/index/images/back.jpg');background-repeat:No-repeat;}*/
	</style>
	<script>
        $(function(){
            //初始化
            var size = $(".img li").size();  //获取图片的个数
            for(var i=1;i<=size;i++){	//创建图片个数相对应的底部数字个数
                var li="<li>"+i+"</li>";	//创建li标签，并插入到页面中
                $(".num").append(li);
            }

            //手动控制图片轮播
            $(".img li").eq(0).show();	//显示第一张图片
            $(".num li").eq(0).addClass("active");	//第一张图片底部相对应的数字列表添加active类
            $(".num li").mouseover(function(){
                $(this).addClass("active").siblings().removeClass("active");  //鼠标在哪个数字上那个数字添加class为active
                var index=$(this).index();  //定义底部数字索引值
                i=index;  //底部数字索引值等于图片索引值
                $(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);	//鼠标移动到的数字上显示对应的图片
            })

            //自动控制图片轮播
            var i=0;  //初始i=0
            var t=setInterval(move,1500);  //设置定时器，1.5秒切换下一站轮播图
            //向左切换函数
            function moveL(){
                i--;
                if(i==-1){
                    i=size-1;  //如果这是第一张图片再按向左的按钮则切换到最后一张图
                }
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");  //对应底部数字添加背景
                $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);  //对应图片切换
            }
            //向右切换函数
            function move(){
                i++;
                if(i==size){
                    i=0;  //如果这是最后一张图片再按向右的按钮则切换到第一张图
                }
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");  //对应底部数字添加背景
                $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);  //对应图片切换
            }
            //左按钮点击事件
            $(".out .left").click(function(){
                moveL();	//点击左键调用向左切换函数
            })
            //右按钮点击事件
            $(".out .right").click(function(){
                move();    //点击右键调用向右切换函数
            })
            //定时器开始与结束
            $(".out").hover(function(){
                clearInterval(t);	//鼠标放在轮播区域上时，清除定时器
            },function(){
                t=setInterval(move,1500);  //鼠标移开时定时器继续
            })
        })
	</script>
	<!--轮播图样式css,js结束-->
</head>
<body>
{block name="daohang"}
<!--导航条开始-->
<div class="container">
	<div class="row">
		<div class="col-md-7">
			<ul class="nav navbar-nav">
				<li><img src="/static/index/images/log.jpg" style="width:275px;height:50px;"></li>
				<li class="active"><a href="/">首页 <span class="sr-only">(current)</span></a></li>
				{volist name="info" id="vo"}
				<li><a href="/{$vo.href_path}">{$vo.cate_name}</a></li>
				{/volist}
			</ul>
		</div>

		<ul class="nav navbar-nav navbar-right">
			{if condition="$Request.session.login_admin.user neq ''"}
			<li><a href="{:url('index/login/out')}" class="btn-sm btn-primary ">退出</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{$Request.session.login_admin.user}
					<span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="{:url('index/personcenter/index')}">个人中心</a></li>
					<li><a href="{:url('index/ordermanagement/index')}">订单管理</a></li>
				</ul>
			</li>
			{elseif condition="$Request.session.login_tel.user_phone neq ''" /}
			<li><a href="{:url('index/login/out')}" class="btn-sm btn-primary ">退出</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{$Request.session.login_tel.user_phone}
					<span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="{:url('index/personcenter/index')}">个人中心</a></li>
					<li><a href="{:url('index/ordermanagement/index')}">订单管理</a></li>
				</ul>
			</li>
			{else}
			<li><a href="{:url('index/reg/index')}" class="btn-sm btn-primary ">注册</a></li>
			<li><a href="{:url('index/login/index')}"  >登录</a></li>
			{/if}
		</ul>

	</div>

	<!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

<!--导航条结束-->
{/block}

{block name="lunbo"}
<!--轮播图开始-->
<div class="out">
	<ul class="img">
		{volist name="result" id="v"}
		<li><a href="{$v['carousel_url']}"><img src="/uploads/advertisingby/{:str_replace('\','/',$v['upload_path'])}" alt="加载失败" style="width: 100%;
			height: 500px;"></a></li>
		{/volist}
	</ul>
	<ul class="num">
		<!--底部数字栏-->
	</ul>
	<div class="left btn"><</div>
	<div class="right btn">></div>
</div>
<!--轮播图结束-->
{/block}

<div style="height:100px;">

</div>
{block name="foot"}
<!--footer开始-->
<div class="footer">
	<div class="footer-hd">
		<h6>友情链接：</h6>
		<p>
			{volist name="data" id="to"}
			<a href="{$to['url']}">{$to['webname']}</a>
			<b>|</b>
			{/volist}
		</p>
	</div>
	<div class="footer-bd">
		<p>
			万水千山欢迎你的到来！
			<em>© 2017-2018 zhoumuhao.com 版权所有</em>
		</p>
	</div>
</div>

<!--footer结束-->
{/block}
{js href="/static/index/js/jquery.js"}
{js href="/static/index/js/jquery.min.js"}
{js href="/static/index/js/bootstrap.min.js"}

</body>

</html>

